<template>
  <div>
    <el-dialog
        title="添加主材"
        :visible.sync="isShow"
        width="70%"
    >
      <!-- 搜索-->
      <el-card>
        <el-form :inline="true" class="form-container" :model="page.query" ref="queryForm">
          <div class="search">
            <el-form-item label="品牌" prop="brand">
              <el-select v-model="page.query.brand" placeholder="请选择品牌名称">
                <el-option
                    v-for="item in brandOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="规格" prop="specification">
              <el-input
                  placeholder="请输入规格"
                  prefix-icon="el-icon-search"
                  v-model="page.query.specification"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="型号" prop="model">
              <el-input
                  placeholder="请输入型号"
                  prefix-icon="el-icon-search"
                  v-model="page.query.model"
              >
              </el-input>
            </el-form-item>
            <el-button icon="el-icon-search" type="success" @click="search">搜索</el-button>
            <el-button icon="el-icon-refresh" type="success" class="reset_btn" @click="reset" >重置</el-button>
          </div>
        </el-form>
      </el-card>
      <div class="table_container">
        <div style="width: 45%">
          <el-table
              border
              ref="sourceTable"
              :data="sourceData"
          >
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="name"
                label="名称"
                :show-overflow-tooltip="true"
                width="90"
            >
            </el-table-column>
            <el-table-column
                prop="brand"
                label="品牌"
                width="80"
            >
              <template slot-scope="scope">
                <span>{{brandMap.get(scope.row.brand)}}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="specification"
                label="规格"
            >
            </el-table-column>
            <el-table-column
                prop="model"
                label="型号"
            >
            </el-table-column>
            <el-table-column
                prop="salePrice"
                label="销售价"
            >
            </el-table-column>
            <el-table-column
                prop="unit"
                label="单位"
            >
              <template slot-scope="scope">
                <span>{{unitMap.get(scope.row.unit)}}</span>
              </template>
            </el-table-column>
          </el-table>
          <Page @handlePage="handlePage" :page="page"></Page>
        </div>


        <div class="button_group">
          <el-button icon="el-icon-arrow-left" type="primary" @click="deleteMainMaterial"></el-button>
          <el-button icon="el-icon-arrow-right" type="primary"  @click="addMainMaterial"></el-button>
        </div >
        <div>
          <el-table
              ref="targetTable"
              :data="targetData"

              border
          >
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                label="项目名称"
                width="180"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.projectName"></el-input>
              </template>
            </el-table-column>
            <el-table-column
                prop="brand"
                label="品牌"
                width="80"
            >
              <template slot-scope="scope">
                <span>{{brandMap.get(scope.row.brand)}}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="specification"
                width="60"
                label="规格"
            >
            </el-table-column>
            <el-table-column
                prop="model"
                width="60"
                label="型号"
            >
            </el-table-column>
            <el-table-column
                prop="salePrice"
                width="70"
                label="销售价"
            >
            </el-table-column>
            <el-table-column
                prop="unit"
                width="60"
                label="单位"
            >
              <template slot-scope="scope">
                <span>{{unitMap.get(scope.row.unit)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="isShow = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import { listMainMaterial } from '@/api/mainMaterial'
import Page from '@/components/page/index.vue'
import { nanoid } from 'nanoid'

export default {
  name: 'MainMaterial',
  components: { Page },
  props: ['brandOptions','brandMap','unitMap'],
  data() {
    return {
      cacheMap: new Map(),
      currentCategory: '',
      isShow: false,
      sourceData: [],
      targetData: [],
      page: {
        current: 1,
        size: 5,
        total: 0,
        query: {
          category: '',
          brand:''
        }
      }
    }
  },
  mounted() {
    this.$bus.$on('handleAddMainMaterial', (id) => {
      this.currentCategory=id
      this.page.query.category = id
      this.isShow = true
      this.reloadMainMaterials()
      this.clearTargetData()
      this.targetData=this.cacheMap.get(this.currentCategory)||[]
    })

    this.$bus.$on('handleCache',(items)=>{
      items.forEach(n=>{
        n.budgetUnits.forEach(k=>{
          k.key=nanoid()
        })
        this.cacheMap.set(n.id,n.budgetUnits)
      })
    })
    this.$bus.$on('clearCache',(key)=>{
      this.cacheMap.delete(key)

    })

  },
  methods:{
    clearTargetData() {
      this.targetData=[]
    },
    deleteMainMaterial() {
      let data = []
      let cacheMap = new Map()
      this.$refs.targetTable.selection.forEach(n=>{
        cacheMap.set(n.key, n)
      })
      this.targetData.forEach(n=>{
        if (!cacheMap.get(n.key)) {
          data.push(n)
        }
      })
      this.targetData=data
      this.cacheMap.set(this.currentCategory,this.targetData)

    },
    save() {
      this.isShow = false
      //缓存已添加的数据
      this.cacheMap.set(this.currentCategory,this.targetData)
      this.$emit('addMainMaterial',this.currentCategory,this.targetData)
    },
    addMainMaterial() {
      this.$refs.sourceTable.selection.forEach(n=>{
        n.key = nanoid()
      })
      this.targetData.push(...this.$refs.sourceTable.selection)
    },
    reloadMainMaterials() {
      listMainMaterial(this.page).then((data) => {
        this.sourceData = data.records
        this.page.total = data.total
      })
    },
    handlePage() {
      this.reloadMainMaterials()
    },
    search() {
      this.reloadMainMaterials()

    },
    reset() {
      this.page.current = 1
      this.$refs.queryForm.resetFields()
      this.reloadMainMaterials()
    }
  }
}
</script>


<style scoped>
.table_container {
  display: flex;
  align-items: center;
}

.button_group {

}
.form-container {
  display: flex;
  justify-content: space-between;
}

.reset_btn {
  background-color: #722ed1;
  border: 1px solid #722ed1;
}

.reset_btn:hover {
  background-color: #7849b7;
  border: 1px solid #7849b7;
}

.reset_btn:focus {
  background-color: #7849b7;
  border: 1px solid #7849b7;
}
</style>
